<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" name="title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="summary">
        <el-input type="textarea" name="summary" class="article-textarea" :rows="3" placeholder="请输入简介"
                  v-model="form.summary">
        </el-input>
      </el-form-item>
      <el-row>
        <el-col :span="5">
          <el-form-item label="分类" prop="category">
            <el-select v-model="form.category" name="category" placeholder="请选择分类">
              <el-option
                v-for="item in categoryOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权限" prop="privacy">
            <el-select v-model="form.privacy" name="privacy" placeholder="请选择权限">
              <el-option
                v-for="item in privacyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="标签" prop="">
        <el-tag :key="tag" v-for="tag in tagList" closable :disable-transitions="false" @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input class="input-new-tag"
                  v-if="tagVisible"
                  v-model="tag" ref="saveTagInput" size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <div id="editor">
          <mavon-editor style="height: 100%" v-model="form.content"></mavon-editor>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click.native.prevent="onSubmit">发布</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import { getList as getCategroyList } from '@/api/category'
  import { editInfo } from '@/api/post'

  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  export default {
    name: 'PostForm',
    data() {
      return {
        tagVisible: false,
        loading: false,
        tag: '',
        tagList: [],
        categoryOptions: [],
        privacyOptions: [{
          value: 0,
          label: '公开'
        }, {
          value: 1,
          label: '私密'
        }],
        form: {
          id: '',
          title: '',
          summary: '',
          tags: '',
          privacy: 0,
          category: '',
          content: ''
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
          summary: [{ required: true, trigger: 'blur', message: '请输入简介' }],
          category: [{ required: true, trigger: 'change', message: '请选择分类' }],
          privacy: [{ required: true, trigger: 'change', message: '请选择权限' }],
          content: [{ required: true, trigger: 'blur', message: '请输入内容' }]
        },
        configs: {
          status: false, // 禁用底部状态栏
          spellChecker: false // 禁用拼写检查
        }
      }
    },
    created() {
      this.fetchCategoryData()
      const row = this.$route.params.row
      if (row !== undefined) {
        this.form.id = row.id
        this.form.title = row.title
        this.form.summary = row.summary
        this.form.tags = row.tags
        if (row.tags !== null) {
          this.tagList = row.tags.split(',')
        }
        this.form.privacy = row.privacy
        this.form.category = row.category.id
        this.form.content = row.content
      }
    },
    methods: {
      fetchCategoryData() {
        getCategroyList({ 'pageSize': 100 }).then(response => {
          this.categoryOptions = response.data.content
        })
      },
      onCancel() {
        this.$router.push({ name: 'Post' })
      },
      onSubmit() {
        var vm = this
        this.form.tags = this.tagList.join(',')
        this.loading = true
        this.$refs.form.validate(valid => {
          if (valid) {
            editInfo(this.form).then(response => {
              if (response.code === 0) {
                this.$message({
                  message: '发布成功',
                  center: true,
                  onClose() {
                    vm.$router.push({ name: 'Post' })
                  }
                })
              }
            })
          }
          this.loading = false
        })
      },
      handleClose(tag) {
        this.tagList.splice(this.tagList.indexOf(tag), 1)
      },

      showInput() {
        this.tagVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },
      handleInputConfirm() {
        const inputValue = this.tag
        if (inputValue) {
          this.tagList.push(inputValue)
        }
        this.tagVisible = false
        this.tag = ''
      }
    },
    components: { mavonEditor }
  }
</script>
<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
